import { FC, useEffect } from 'react';
import useGetPageInfo from '../../../../../hooks/useGetPageInfo';
import { Form, Input } from 'antd';
import { useDispatch } from 'react-redux';
import { resetPageInfo } from '../../../../../store/pageInfoReducer';
const { TextArea } = Input;
const PageSetting: FC = () => {
  const [form] = Form.useForm();
  const pageInfo = useGetPageInfo();
  console.log('pageInfo', pageInfo);
  const dispatch = useDispatch();
  useEffect(() => {
    form.setFieldsValue(pageInfo);
  }, [pageInfo]);

  function handleValuesChange() {
    dispatch(resetPageInfo(form.getFieldsValue()));
  }
  return (
    <Form
      form={form}
      layout="vertical"
      initialValues={pageInfo}
      onValuesChange={handleValuesChange}
    >
      <Form.Item label="问卷标题" name="title">
        <Input placeholder="请输入标题" />
      </Form.Item>
      <Form.Item label="问卷描述" name="desc">
        <TextArea placeholder="请输入描述" />
      </Form.Item>
      <Form.Item label="样式代码" name="css">
        <TextArea placeholder="请输入样式代码..." />
      </Form.Item>
      <Form.Item label="脚步代码" name="js">
        <TextArea placeholder="请输入脚步代码..." />
      </Form.Item>
    </Form>
  );
};
export default PageSetting;
